<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物管理</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/pet.css">
  <link rel="stylesheet" href="fonts/iconfont.css">
  <script src="js/vue.js"></script>
  <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
  <!-- 导航栏部分 -->
  <div class="nav">
    <h1 class="left">宠物管理系统</h1>
    <div class="right">
      <span class="user">欢迎管理员登录</span>
      <span><a href="index.html">登出</a></span>
    </div>
  </div>

  <!-- 内容部分 -->
  <div class="container">
    <!-- 左侧下拉菜单 -->
    <div class="leftnav">
      <div>后台管理</div>
      <ul>
        <li><a href="user.html">用户信息</a></li>
        <li><a href="admin.html">管理员信息</a></li>
        <li><a href="pet.html">宠物管理</a></li>
        <li><a href="adoptmanger.html">领养管理</a></li>
        <li><a href="agree.html">同意领养列表</a></li>
        <li><a href="disagree.html">不同意领养列表</a></li>
      </ul>
    </div>

    <!-- 右侧表单 -->
    <div class="rightform">
      <div class="form">
        <h1>宠物信息管理</h1>
        <div class="ipt">
          <span>宠物类型</span>
          <span class="search">
                        <input type="text" name="" id="" v-model="species">
                        <button class="iconfont btn" @click="searchBySpecies">&#xe605;</button>
                    </span>
          <button class="toggleModal add" @click="add">新增</button>
          <button class="toggleModal add" @click="reset">重置</button>
        </div>
        <table class="table">
          <!-- 标题 -->
          <caption>宠物信息列表</caption>
          <thead>
          <tr>
            <th>宠物名</th>
            <th>种类</th>
            <th>性别</th>
            <th>生日</th>
            <th>领养状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(pet,i) in pets">
            <td>{{pet.petname}}</td>
            <td>{{pet.species}}</td>
            <td>{{pet.gender}}</td>
            <td>{{pet.birthday}}</td>
            <td v-if="pet.state===0">没有用户领养</td>
            <td v-if="pet.state===1">已被申请领养</td>
            <td v-if="pet.state===2">已领养</td>
            <td>
              <button class="toggleModal update" @click="update(pet.id)">修改</button>
              <button class="toggleModal delete" @click="del(pet.id)">删除</button>
            </td>
          </tr>

          </tbody>
        </table>
        <!-- 修改模态框部分 -->
        <template v-if="updateShow">
          <div class="modal" >
            <div class="modal-header">
              <p class="title" >修改宠物信息</p>
              <p class="close" @click="close">×</p>
            </div>
            <form class="modal-content">
              <label>
                  <span>宠物名</span>
                  <input type="text" id="petName">
              </label>
                <label>
                  <span>种类</span>
                  <input type="text" id="species"></label>
                <label>
                  <span>性别</span>
                  <input type="text" id="gender">
                </label>
                <label>
                  <span>生日</span>
                  <input type="date" id="birthday"></label>
                <label>
                  <span>领养状态</span>
                  <select value="0" id="state">
                    <option value="0">没有用户领养</option>
                    <option value="1">已被申请领养</option>
                    <option value="2">已领养</option>
                  </select>
                </label>
            </form>
            <div class="modal-footer">
              <button class="close btn" @click="close">关闭</button>
              <button class="btn" @click="updatepreserve">保存修改</button>
            </div>
          </div>
        </template>
        <!-- 新增模态框部分 -->
        <template v-if="insertShow">
          <div class="modal">
            <div class="modal-header">
              <p class="title" >新增宠物信息</p>
              <p class="close" @click="close">×</p>
            </div>
            <form class="modal-content">
              <label><span>宠物名</span> <input type="text" v-model="petForm.petName"></label>
              <label><span>种类</span> <input type="text" v-model="petForm.species"></label>
              <label><span>性别</span>
                <select value="雄性" v-model="petForm.gender">
                  <option value="雄性">雄性</option>
                  <option value="雌性">雌性</option>
                </select>
              </label>
              <label><span>生日</span> <input type="date" v-model="petForm.birthday"></label>
              <label><span>领养状态</span>
                <select value="0" v-model="petForm.state">
                  <option value="0">没有用户领养</option>
                  <option value="1">已被申请领养</option>
                  <option value="2">已领养</option>
                </select>
              </label>
            </form>
            <div class="modal-footer">
              <button class="close btn" @click="close">关闭</button>
              <button class="btn" @click="addpreserve">添加宠物</button>
            </div>
          </div>
        </template>
        <template v-if="flag">
          <div class="mask"></div>
        </template>
        <!-- 分页功能 -->
        <div class="page">
          <div class="leftPage">
            当前第<span>{{curPage}}</span>页
            共<span>{{totalPage}}</span>页
            <span>{{totalitem}}</span>条记录
          </div>
          <ul class="rightPage">
            <li><span @click="getPage(1)">首页</span></li>
            <li><span @click="getPage(curPage-1)">上一页</span></li>
            <!-- 用于遍历查出来的数据 -->
            <li v-for="index of totalPage"><span @click="getPage(index)">{{index}}</span></li>
            <li><span @click="getPage(curPage+1)">下一页</span></li>
            <li><span @click="getPage(totalPage)">尾页</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--<script src="js/admin.js"></script>-->
<script>
  const {createApp} = Vue;
  createApp({
    data() {
      return {
        pets:new Map(),
        insertShow:false,
        updateShow:false,
        flag:false,
        p:new Map(),
        petForm:{},
        species: "",
        pageSize:2,
        totalitem:0,
        totalPage:0,
        curPage:0,
      }
    },
    created() {
      this.reload();
    },



    methods: {
      // 分页函数
      getPage(index) {
        const that = this;
        if(index===0) index=1;
        if(index>=this.totalPage) index=this.totalPage;
        axios({
          method:"get",
          url:"/pet/getpage?index="+index,

        }).then(function (res) {
          that.pets = res.data.page.pageContentList;
          that.curPage = res.data.page.curPage;
        })
      },

      // 重置按钮
      reset() {
        this.reload();
      },

      close(){
        this.insertShow = false;
        this.updateShow = false
        this.flag = false;
      },

      // 添加
      add() {
        this.insertShow = true;
        this.flag = true
        this.userForm = {};
      },

      // 修改
      update(id) {
        const that = this;
        this.updateShow = true;
        this.flag = true;
        axios({
          method: "get",
          url:"/pet/getpetbyid?pid="+id,
          contentType: 'application/json',
        }).then(function (res) {
          if (res.data.code===200) {
            // console.log(res.data.contents)
            // console.log(id)
            that.p = res.data.contentList[0];
            console.log(res.data.contentList[0])
            document.getElementById('petName').value=res.data.contentList[0].petname;
            document.getElementById('species').value=res.data.contentList[0].species;
            document.getElementById('gender').value=res.data.contentList[0].gender;
            document.getElementById('birthday').value=res.data.contentList[0].birthday;
            document.getElementById('state').value=res.data.contentList[0].state;
          }
        })
      },

      // 删除
      del(id) {
        const that = this;
        console.log(typeof id)
        axios({
          method: "get",
          url:"/pet/delpet?petid="+id,
          // contentType: 'application/json',

        }).then(function (res) {
          if(res.data.code===200) {
            alert("删除成功")
            that.reload();
          }
        })
      },

      //保存修改
      updatepreserve() {
        const that = this;
        console.log(JSON.parse(JSON.stringify(this.p)).id);
        // 编辑
        axios({
          method: "post",
          url:"/pet/altpet",
          contentType: 'application/json',
          data:{
            "id":JSON.parse(JSON.stringify(this.p)).id,
            "petname": document.getElementById('petName').value,
            "species":document.getElementById('species').value,
            "gender":document.getElementById('gender').value,
            "birthday":document.getElementById('birthday').value,
            "state":document.getElementById('state').value,
          },
        }).then(function (res) {
          if (res.data.code===200) {
            that.close();
            that.reload();
          }
        })
      },

      // 保存新增
      addpreserve() {
        const that = this;
        // 新增
        axios({
          method: "post",
          url:"/pet/addpet",
          contentType: 'application/json',
          data:{
            "petname":this.petForm.petName,
            "species":this.petForm.species ,
            "gender":this.petForm.gender,
            "birthday":this.petForm.birthday,
            "state":parseInt(this.petForm.state),
          },
        }).then(function (res) {
          if (res.data.code===200) {
            that.close();
            that.reload();
          }
        })
      },
      searchBySpecies() {
        const that = this;
        axios({
          method: "get",
          url:"/pet/getpetbyspeci?species="+that.species + "&pageSize="+this.pageSize,
          contentType: 'application/json',
        }).then(function (res) {
          console.log(res.data.page.pageContentList)
          that.pets = res.data.page.pageContentList;
        })
      },

      reload() {
        const that = this;
        axios({
          method:"get",
          url:"/pet/getpets?pageSize="+this.pageSize+"&state=0",
        }).then(function (res) {
          console.log(res.data.page)
          console.log(res.data.page.pageContentList)
          that.pets = res.data.page.pageContentList;
          that.totalitem = res.data.page.totalitem;
          that.curPage = res.data.page.curPage;
          that.totalPage = res.data.page.totalPage;
        })
      },

    }
  }).mount("#root")
</script>
</body>
</html>